<template>
	<view class="page-body">
		<view class="customer_info">
			<view class="customer_top">
				<text class="customer_name" >{{customerInfo.customerName}}</text>
				<view class="clue_status follow_status" v-if="customerInfo.clueStatus=='已分配'">
					<text class="trigon"></text>待跟进
				</view>
				<view class="clue_status invalid_status" v-if="customerInfo.clueStatus=='无效'">
					<text class="trigon"></text>{{customerInfo.clueStatus}}线索
				</view>
				<view class="clue_status ok_status" v-if="customerInfo.clueStatus=='已成交'">
					<text class="trigon"></text>{{customerInfo.clueStatus}}
				</view>
			</view>
			<view class="intention_car">
				<view>
					<text>意向车型：</text>
					<text>{{customerInfo.intentCarBrand}}</text>/
					<text>{{customerInfo.intentCarModel}}</text>
					{{customerInfo.intentCarStyle==null?'':'/'}}
					<text>{{customerInfo.intentCarStyle}}</text>
				</view>
				<view>
					<text>来源渠道：</text>
					<text>{{customerInfo.firstChannelName}}/{{customerInfo.secondChannelName}}</text>
				</view>
			</view>
			<u-line color="#E1E1F0" />	
			<view class="handle">
				<view class="call" @click.stop="showOperation('phone')">
					<image src="@/static/images/tel_icon.png"></image>
					打电话
				</view>
				<view class="shu-line">
					|
				</view>
				<view class="message" @click.stop="showOperation('sms')">
					<image src="@/static/images/sms_icon.png"></image>
					发短信
				</view>
				<view class="shu-line" v-if="userInfo.role=='150'">
					|
				</view>
				<view class="follow" @click.stop="showOperation('follow')" v-if="userInfo.role=='150'">
					<image src="@/static/images/clue_detail.png"></image>
					跟进线索
				</view>
			</view>
		</view>
		<view class="tab_bar">
			<block v-for="(item,idx) in tabArr" :key="idx">
				<view :class="['tab_item', idx == tabIdx ? 'act_tab':'']" @click="tabClick(item)">
					{{item.tagLaber}} 
				</view>
				<text class="shu-line" v-if="idx<tabArr.length-1">|</text>
			</block>
		</view>
		
		<view class="content">
			<clueHistory v-if="tabIdx == '0'" :historyunique="historyunique"></clueHistory>
			<clueInfo v-if="tabIdx == '1'"  :clueId="clueId"/>
			
		</view>
		<show-modal v-if="isShowModal" :showType="showType" :isPopup="isShowModal" :popUpContent="popUpContent"  :showModalOperation.sync="isShowModal"/>
	</view>
</template>

<script>
	import clueInfo from "./../components/clueInfo.vue"
	import clueHistory from "./../components/clueHistory/index.vue"
	import showModal from "@/components/showModal/index.vue";
	import {getClueDetail} from '@/service/api/api.js'
	export default {
		components: {
			clueInfo,clueHistory,showModal
		},
		data() {
			return {
				userInfo: {},
				customerInfo:{},
				tabIdx: '0',
				tabArr:[{
					tagId: '0',
					tagLaber: '跟进历史',
				},{
					tagId: '1',
					tagLaber: '线索信息',
				},
				// {
				// 	tagId: '2',
				// 	tagLaber: '试驾记录',
				// },{
				// 	tagId: '3',
				// 	tagLaber: '报价试算',
				// },{
				// 	tagId: '4',
				// 	tagLaber: '订单信息',
				// },
				],
				clueId: '',
				historyunique:{},//跟进历史参数
				isShowModal:false,
				popUpContent:{},
				popUpContentdata:{}
			}
		},
		onShow() {
			this.$forceUpdate()
		},
		onLoad(option) {
			this.historyunique={	
				id:option.id,
				uniqueId:option.uniqueId,
				phone:option.phone,
				followNum: option.followNum,
				clueStatus: option.clueStatus
			}
			this.popUpContentdata={
				id:option.id,
				uniqueId:option.uniqueId,
				phone:option.phone,
				followNum: option.followNum,
				clueStatus: option.clueStatus,
				customerName:option.customerName,
				intentCarBrand:option.intentCarBrand,
				intentCarModel:option.intentCarModel,
				intentCarStyle:option.intentCarStyle,
				firstChannelName:option.firstChannelName,
				secondChannelName:option.secondChannelName
			}
			try {
				this.clueId = option.id,
				this.tabIdx = option.tabIdx || '1'
				// this.userInfo = uni.getStorageSync('userInfo')
				// console.log(this.dateSpacing)
			} catch (e) {
				console.log(e)
			}

		},
		created(){
			this.reqClueDetail();
			this.userInfo=uni.getStorageSync('user_info')
		},
		methods: {
			//tab切换
			tabClick(data){
				if(data.tagId==0 || data.tagId==1){
					this.tabIdx=data.tagId
				}
			},
			reqClueDetail() {
				getClueDetail({
					id: this.historyunique.id
				}).then(res => {
					if (res.data.code == 0) {
						console.log(res.data.data)
						this.customerInfo=res.data.data
					}
				})
			},
			//拨打电话 发短信 其他跳转
			showOperation(e){
				switch (e){
					case 'phone':
						this.showType='phone'
						this.popUpContent = {
							id:this.popUpContentdata.id,
							uniqueId: this.popUpContentdata.uniqueId,
							mobile: this.popUpContentdata.phone,
							followNum: this.popUpContentdata.followNum || 0,
							clueStatus: this.popUpContentdata.clueStatus,
							//isEdit:true
						}
						//console.log(this.popUpContentdata)

						this.isShowModal=true
						break;
					case 'sms':
						this.showType='sms'

						this.popUpContent = {
							id:this.popUpContentdata.id,
							uniqueId: this.popUpContentdata.uniqueId,
							mobile: this.popUpContentdata.phone,
							followNum: this.popUpContentdata.followNum || 0,
							clueStatus: this.popUpContentdata.clueStatus,
							//isEdit:true
						}

						this.isShowModal=true
						break;
					case 'follow':
						uni.redirectTo({
							// id 跟进id, uniqueId 唯一id, followUp 形式, followNum 跟进次数,followPurposes 目的
							url: `/pages/clue/clueFollowUp/index?uniqueId=${this.popUpContentdata.uniqueId}&followNum=${this.popUpContentdata.followNum || 0}&followUp=${e}&clueStatus=${this.popUpContentdata.clueStatus}`
						})
						break;
					default:
						break;
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	@import './index.scss';
	.customer_info{
		padding: 30rpx;
		margin: 30rpx;
		background: white;
		border-radius: 10rpx;
		box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.05);
		color:#43425D;
		position: relative;
		.customer_top{
			margin: 40rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.customer_name{
				font-size: 34rpx;
				font-weight: bold;
			}
			.clue_status{
				width: 120rpx;
				height: 44rpx;
				line-height: 44rpx;
				text-align: center;
				color:white;
				font-size: 20rpx;
				position: absolute;
				font-weight: 400;
				right: 0;
				.trigon{
					position:absolute;
					left: 0;
					width: 0;
					height: 0;
					border-top: 22rpx solid transparent;
					border-left: 14rpx solid white;
					border-bottom: 22rpx solid transparent
				}
			}
			.follow_status{
				background: #FFB16E;
			}
			.invalid_status{
				background: #C6C6CE;
			}
			.ok_status{
				background: #71DDB8;
			}
		}
		.intention_car{
			font-size: 28rpx;
			color: #68677D;
			view{
				margin-bottom: 30rpx;
			}
		}
		.handle{
			font-size: 26rpx;
			// height: 100rpx;
			margin-top: 30rpx;
			padding: 0 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			view{
				display: flex;
				justify-content: center;
				align-items: center;
				image{
					width: 32rpx;
					height: 32rpx;
					margin-right: 4rpx;
				}
			}
			.call,.follow,.message{
				flex: 1;
			}
			.shu-line{
				color:#F0F0F7;
			}
		}
	}
</style>
